<html ng-app="myApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>天翼区块链路由器</title>
    <link href="<%=resource%>/imgs/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="<%=resource%>/index.css">
    <script type="text/javascript" src="<%=resource%>/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/menu.js"></script>
    <script src="<%=resource%>/angular/angular.js"></script>
    <script src="<%=resource%>/angular/angular-sanitize.min.js"></script>
    <script src="<%=resource%>/angular/angular-animate.min.js"></script>
    <script src="<%=resource%>/js/app/ngapp.js"></script>
    <link href="<%=resource%>/layer/skin/default/layer.css" rel="stylesheet">
    <script src="<%=resource%>/layer/layer.js"></script>
</head>

<body>
<div class="wrap">
    <div id="head">
        <span style="margin-left:60px;"></span><img src="<%=resource%>/imgs/logo.png">
        <span style="margin-left:20px;">天翼区块链路由器</span>
        <a href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</a>
        <a href="http://www.skywindlink.com/" target="_blank">访问官网</a>
        <a class="qrcode">APP下载
            <div class="d">
                <img src="<%=resource%>/imgs/qrcode.jpg">
            </div>
        </a>
    </div>
    <div id="head-phone">
        <div class="h-left">
            <span><img src="<%=resource%>/imgs/logo.png"></span>
            <span class="h-t">天翼区块链路由器</span>
        </div>
        <div class="h-right">
            <a href="http://www.skywindlink.com/" target="blank">访问官网</a><span class="h-line"> | </span><span class="h-app">APP下载</span>
            <img class="h-nav" src="<%=resource%>/imgs/h-nav.png" alt="">
            <div class="d">
                <img src="<%=resource%>/imgs/qrcode.jpg">
            </div>
        </div>
    </div>
    <div id="phone-nav">
        <div class="nav-close"><img src="<%=resource%>/imgs/nav-close.png"></div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "index")%>' style="margin-top: 40px">
            <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
            <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
            <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
            <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
        </div>
        <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
            <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
            <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
            <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
        </div>
        <div class="logout"><span href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</span></div>
    </div>
    <div class="container clearfix">
        <div id="menu">
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "index")%>'>
                <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
                <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
                <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
            </div>
            <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
                <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
            </div>
            <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
                <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
                <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
                <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
            </div>
        </div>
        <div class="content sp" ng-controller="fireWallController">
            <div class="c">
                <div class="lb">
                    <span>防火墙</span>
                </div>
                <div class="ct">
                    <div class="pl">
                        <span class="s">防火墙开关</span>
                        <div class="bt" ng-click="clickStatus()">
                            <div ng-if="firewall.filter.enable=='1'" class="cl"><span>ON</span></div>
                            <div ng-if="firewall.filter.enable=='0'" class="cf"><span>OFF</span></div>
                        </div>
                    </div>
                    <div class="pfl">
                        <span class="ts">防火墙规则</span>
                        <div class="cl">
                            <!--<input type="radio" name="allow" value="allow" ng-model="firewall.filter.rule" ng-change="changerule()">-->
                            <span>拒绝 列表中生效的MAC地址访问本网络</span>
                        </div>
                        <!--<div class="cl1">-->
                        <!--<input type="radio" name="allow" value="deny" ng-model="firewall.filter.rule" ng-change="changerule()">-->
                        <!--<span>拒绝 列表中生效的MAC地址访问本网络</span>-->
                        <!--</div>-->
                    </div>
                    <div class="btc" ng-show="firewall.filter.enable=='1'">
                        <div class="ll">
                            <button class="btn" ng-click="addNew()">新增</button>
                            <button class="sbtn" ng-click="deleteAll()">删除所有</button>
                        </div>
                        <table>
                            <tr>
                                <th>ID</th>
                                <th>MAC地址</th>
                                <th>描述</th>
                                <th>编辑</th>
                            </tr>
                            <tr ng-repeat="item in devices">
                                <td><span>{{$index+1}}</span></td>
                                <td>
                                    <span ng-if="!item.isnew">{{item.mac}}</span>
                                    <div class="cci" ng-if="item.isnew">
                                        <input type="text" class="cin" ng-model="item.mac">
                                    </div>
                                </td>
                                <td>
                                    <span ng-if="!item.isnew">{{item.name}}</span>
                                    <div class="cci" ng-if="item.isnew">
                                        <input type="text" class="cin" ng-model="item.name">
                                    </div>
                                </td>
                                <td>
                                    <button class="btn save-btn" ng-if="item.isnew" ng-click="saveItem(item)">保存</button>
                                    <button class="btn" ng-click="deleteItem($index,item)">删除</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="row h-100 m-40">
                        <!--<div class="r-btnbar">-->
                            <!--<button class="btn" ng-click="savefireWall()">保存配置</button>-->
                        <!--</div>-->
                    </div>
                </div>
                <div id="footer">
                    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
                </div>
                <script type="text/html" id="ruledevice">
                    <div style="margin:40px 40px 20px 40px; ">
                        <div>
                            <span>MAC地址</span>
                        </div>
                        <div>
                            <input type="text" class="cin" id="mac">
                        </div>
                    </div>
                    <div style="margin:20px 40px; ">
                        <div>
                            <span>描述</span>
                        </div>
                        <div>
                            <input type="text" class="cin" id="name">
                        </div>
                    </div>
                    <div style="margin-top:40px;margin-bottom:20px;; text-align:center;">
                        <button class="cbtn" onclick="addItem()">确定</button>
                    </div>
                </script>
            </div>
        </div>
        <script type="text/javascript">
            app.controller('fireWallController', function($scope, $http) {
                $scope.devices = [];
                $scope.firewall = {};
                $scope.addNew = function() {
                    for (var i = 0; i < $scope.devices.length; i++) {
                        if ($scope.devices[i].isnew) {
                            utils.alert("请先保存列表中的数据");
                            return;
                        }
                    }
                    var device = {
                        mac: '',
                        name: '',
                        isnew: true,
                    };
                    $scope.devices.push(device);

                };
                // $scope.changerule = function() {
                //     console.log($scope.firewall.filter.rule);
                //     $scope.getrule();
                // }
                $scope.saveItem = function(item) {
                    if (!utils.checkIsMac(item.mac)) {
                        utils.alert('mac地址输入有误');
                        return;
                    }
                    if (!item.mac || !item.name) {
                        utils.alert('输入信息不能为空！');
                        return;
                    }
                    console.log(item);
                    var url = '<%=luci.dispatcher.build_url("web", "system", "setrules")%>';
                    var data = {
                        act: 0,
                        mac: item.mac,
                        name: item.name,
                        // rule: $scope.firewall.filter.rule
                        rule: 'deny'
                    };
                    $http({
                        method: 'POST',
                        url: url,
                        data: $.param(data),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                        }
                    }).success(function(data) {
                        console.log(data);
                        if (data.code == 0) {
                            item.isnew = false;
                            // utils.alert("保存成功");
                            $scope.savefireWall();
                        } else {
                            utils.alert(data.msg);
                        }
                    });
                }
                $scope.getfireWall = function() {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "filter")%>';
                    $http({
                        method: 'POST',
                        url: url
                    }).success(function(data) {

                        console.log(data);
                        if (data.code == 0) {
                            $scope.firewall = data.data;
                            $scope.devices = data.data.list;
                            if (data.data.filter.count == 0) {
                                $scope.devices = [];
                            }
                            console.log($scope.devices);
                        } else {
                            utils.alert(data.msg);
                        }
                    });
                }
                $scope.savefireWall = function(para) {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "filterset")%>';
                    var data = $scope.firewall.filter;
                    console.log(data);
                    $http({
                        method: 'POST',
                        url: url,
                        data: $.param(data),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                        }
                    }).success(function(data) {
                        console.log(data);
                        if (data.code == 0) {
                            utils.alert("保存成功");
                        } else {
                            utils.alert(data.msg);
                        }
                    });
                }
                $scope.getrule = function() {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "getrules")%>';
                    var data = {
                        // rule: $scope.firewall.filter.rule
                        rule: 'deny'
                    };
                    $http({
                        method: 'POST',
                        url: url,
                        data: $.param(data),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                        }
                    }).success(function(data) {
                        console.log(data);
                        if (data.code == 0) {
                            if (data.data.filter.count == 0) {
                                $scope.devices = [];
                            } else {
                                $scope.devices = data.data.list;
                            }
                        } else {
                            utils.alert(data.msg);
                        }
                    });
                }
                $scope.deleteItem = function(index, item) {
                    if (item.isnew) {
                        $scope.devices.splice(index, 1);
                    } else {
                        console.log(item);
                        var url = '<%=luci.dispatcher.build_url("web", "system", "setrules")%>';
                        var data = {
                            act: 1,
                            mac: item.mac,
                            name: item.name,
                            // rule: $scope.firewall.filter.rule
                            rule: 'deny'
                        };
                        $http({
                            method: 'POST',
                            url: url,
                            data: $.param(data),
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                            }
                        }).success(function(data) {
                            if (data.code == 0) {
                                // utils.alert("操作成功");
                                $scope.devices.splice(index, 1);
                                $scope.savefireWall();
                            } else {
                                utils.alert(data.msg);
                            }
                        });
                    }
                }
                $scope.deleteAll = function() {
                    for (var i = 0; i < $scope.devices.length; i++) {
                        if ($scope.devices[i].isnew) {
                            utils.alert("请先保存列表中的数据");
                            return;
                        }
                    }
                    var url = '<%=luci.dispatcher.build_url("web", "system", "setrules")%>';
                    var data = {
                        act: 2,
                        // rule: $scope.firewall.filter.rule
                        rule: 'deny'
                    };
                    $http({
                        method: 'POST',
                        url: url,
                        data: $.param(data),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                        }
                    }).success(function(data) {
                        if (data.code == 0) {
                            $scope.devices = [];
                            // utils.alert("操作成功");
                            $scope.savefireWall();
                        } else {
                            utils.alert(data.msg);
                        }
                    });
                }
                $scope.clickStatus = function() {
                    if ($scope.firewall.filter.enable == "0") {
                        $scope.firewall.filter.enable = "1";
                        $scope.firewall.filter.rule = "deny";
                    } else {
                        $scope.firewall.filter.enable = "0";
                        $scope.firewall.filter.rule = "";
                    }
                    $scope.savefireWall();
                }
                $scope.init = function() {
                    $scope.getfireWall();
                };
                $scope.init();
            });
        </script>
    </div>
</div>
<div id="phone-footer">
    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
</div>
</body>

</html>